<template>
  <div id="app">
    <table>
      <option value="">欢迎光临_vue开发的收银系统_水果店</option>
      <tr>
        <th>苹果10￥/斤,折扣 8 折</th>
      </tr>
      <tr>
        <td>
          <span>请输入你要买的斤数</span>
          <input type="text" v-model.number="num" />
        </td>
      </tr>
      <tr>
        <td>
          <button @click="buyFn">结账买单</button>
        </td>
      </tr>
      <tr>
        <td>
          <span>账单:总价 {{ price1 }}</span>

          <span>￥元 折后价：{{ price }}￥元 </span>

          <span>省了</span>
          <span>{{ cprice }}￥元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      price1: 0,
      price: 0,
      cprice: 0,
    };
  },
  methods: {
    buyFn() {
      this.price1 = this.num * 10;
      this.price = this.num * 8;
      this.cprice = this.price1 - this.price;
    },
  },
};
</script>

<style>
</style>
